import React, {useEffect, useState} from "react";
import {Icon, NavBar, List, Button, WingBlank} from "antd-mobile";
import {useParams, useHistory} from 'react-router-dom';

import CopyFooter from "../../component/copyFooter";
import {delBox, getObjectData, staticUrl, delObject} from "../../requests";
import LoadingImage from "../../component/loadingImage";


export default function ObjectInfo(props) {
    let rParams = useParams();
    let rHistory = useHistory();

    let [imgLoadHeight, setImgLoadHeight] = useState(false);
    let [objectData, setObjectData] = useState({});

    useEffect(function () {
        getObjectData(rParams).then(resp => {
            setObjectData(resp.data);
        }).catch(e => {
            if (e.response.status === 404) {
                rHistory.replace("/404");
            }
        });
    }, []);

    return (
        <div>
            <NavBar
                mode="dark"
                icon={<><Icon type="left"/><span style={{marginTop: 3}}>返回盒子</span></>}
                onLeftClick={() => {
                    rHistory.replace("/box/" + objectData.box_id);
                }}
            >物品</NavBar>

            <List renderHeader={() => {
                return (
                    <p>物品详情</p>
                )
            }} renderFooter={() => {
                return (
                    <p>创建时间：<span>{objectData.date}</span></p>
                )
            }}>
                <List.Item multipleLine={true} wrap={true}>
                    物品名称：<List.Item.Brief/>
                    <span className={"brief"}>{objectData.name}</span>
                </List.Item>
                <List.Item multipleLine={true} wrap={true}>
                    物品图片：<List.Item.Brief/>
                    <div style={{height: imgLoadHeight ? "auto" : 150}}>
                        <LoadingImage style={{width: "100%", height: "auto"}} alt={"图片"}
                                      src={staticUrl(objectData.image)}
                                      onLoad={() => {
                                          setImgLoadHeight(true);
                                      }}/>
                    </div>
                </List.Item>
                <List.Item>
                    物品数量：<span className={"brief"}>{objectData.count}</span>
                </List.Item>
                <List.Item multipleLine={true} wrap={true}>
                    物品描述：<List.Item.Brief/>
                    <span className={"brief"}>{objectData.desc}</span>
                </List.Item>
            </List>

            <WingBlank size={"lg"}>
                <Button type={"warning"} onClick={() => {
                    delObject({id: objectData.id}).then();
                    rHistory.replace("/box/" + objectData["box_id"]);
                }}>删除物品</Button>
            </WingBlank>

            <CopyFooter/>
        </div>
    );
}